<template>
  <div>
    <BasicModal
      @register="register"
      :title="title"
      width="600px"
      :destroyOnClose="true"
      :canFullscreen="false"
      :showOkBtn="false"
      :showCancelBtn="false"
    >
      <BasicForm @register="registerForm" />
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, useForm } from '@/components/Form';
  import { ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import {
    addSmsAccount,
    editSmsAccount,
    getSmsAccountById,
    getSmsApiAccountOrgs,
  } from '@/api/institution/smsAccountConfiguration';
  import { ISmsAccountData } from '@/api/institution/model/smsAccountConfigurationModel';

  const title = ref('新增字典');
  const type = ref(1);
  const { createMessage } = useMessage();

  const emit = defineEmits(['reload']);

  const typeMap = {
    1: '新增短信账户',
    2: '编辑短信账户',
  };

  const orgParams = ref('');

  const [registerForm, { validate, setProps, setFieldsValue, clearValidate }] = useForm({
    schemas: [
      {
        field: 'id',
        component: 'Input',
        label: '字典主键',
        show: false,
      },
      {
        field: 'orgInfoId',
        component: 'ApiSelect',
        label: '机构列表',
        required: true,
        componentProps: {
          params: orgParams,
          filterOption: false,
          api: getSmsApiAccountOrgs,
          labelField: 'orgName',
          valueField: 'id',
          showSearch: true,
          placeholder: '请选择机构',
          onSearch: async (val) => {
            orgParams.value = val;
          },
          onChange: (val) => {
            val && clearValidate('orgInfoId');
          },
        },
      },
      {
        field: 'sign',
        component: 'Input',
        label: '短信签名',
        required: true,
      },
      {
        field: 'balance',
        component: 'Input',
        label: '短信余额',
        required: true,
      },
      {
        field: 'apiAccountByNotice',
        component: 'Input',
        label: '通知-api账号',
        required: true,
      },
      {
        field: 'apiPasswordByNotice',
        component: 'Input',
        label: '通知-api密码',
        required: true,
      },
      {
        field: 'apiAccountByMarketing',
        component: 'Input',
        label: '营销-api账号',
        required: true,
      },
      {
        field: 'apiPasswordByMarketing',
        component: 'Input',
        label: '营销-api密码',
        required: true,
      },
      {
        field: 'remarks',
        component: 'InputTextArea',
        label: '备注',
        componentProps: {
          rows: 4,
        },
      },
    ],
    autoFocusFirstItem: true,
    
    actionColOptions: {
      span: 24,
    },
    labelWidth: 120,
    baseColProps: { span: 18 },
    submitButtonOptions: {
      text: '保存',
    },
    resetButtonOptions: {
      text: '取消',
    },
    submitFunc: async () => {
      const data: ISmsAccountData = await validate();
      setProps({
        submitButtonOptions: {
          loading: true,
        },
      });

      try {
        (data.id && (await editSmsAccount({ ...data }))) || (await addSmsAccount({ ...data }));
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });

        createMessage.success('提交成功！');
        emit('reload');
        closeModal();
      } catch (error) {
        console.log('error--->', error);
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });
      }
    },
    resetFunc: async () => {
      closeModal();
    },
  });

  const [register, { closeModal }] = useModalInner(async (data) => {
    type.value = data.type;
    if (data.row) {
      const res = await getSmsAccountById(data.row.id);
      setFieldsValue(res);
    }
    title.value = typeMap[data.type];
  });
</script>

<style lang="less" scoped></style>
